<script setup lang="ts">
import {computed, inject} from 'vue'
const props = defineProps({
  fourCornerInfo: {
    type: Object,
    default: null
  },
})

const {
  baseFontSize
} = inject('viewerInfo') as any;

const fontSize = computed(() => {

  if ( baseFontSize.value > 14){
    return `!text-[${[baseFontSize.value]}px]`
  }else {
    const percent = Math.round(baseFontSize.value / 14 * 100)
    return `!text-[14]px] scale-[0.5]`
  }
})

const getStyle = () => {
  if (baseFontSize.value >= 20){
    return `font-size: 20px; line-height: 25px;`
  }
  if ( baseFontSize.value > 14){
    return `font-size: ${baseFontSize.value}px; line-height: 20px;`
  }else {
    const percent = (baseFontSize.value / 14).toFixed(2)
    return `font-size: 14px; line-height: 20px; zoom: ${percent}`
  }
}

const cornerOrder = ['lt', 'tm', 'rt', 'lm', 'center', 'rm', 'lb', 'bm', 'rb']

const getPositionInfo = (position) => {
  if (props.fourCornerInfo !== null && props.fourCornerInfo[position]) {
    return props.fourCornerInfo[position]
  } else {
    return null
  }
}
</script>

<template>
  <div
    class="w-full h-full p-[5px]! absolute left-0 top-0 z-9  font-mono
            text-red-300 grid grid-cols-3 grid-rows-3 select-none"
  >
    <template v-for="position in cornerOrder" :key="position">
      <div :class="position" class="inline-block text-nowrap"  :style="getStyle()" >
        <div v-for="oneRowInfo in getPositionInfo(position)" >
          <div class="a-attr-record mr-[3px]! inline-block text-nowrap"
               v-for="[k, v] in Object.entries(oneRowInfo)">
            <span v-if="k" class="mr-[3px]" > {{ k }}:</span>
            <span class="mr-[3px] text-nowrap" >{{ v }}</span>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.lb {
  @apply self-end;
}

.rb {
  @apply justify-self-end self-end;
}

.tm {
  @apply flex justify-center;
}

.lm {
  @apply flex items-center;
}

.bm {
  @apply flex justify-center items-end;
}

.rm {
  @apply flex justify-end items-center;
}
</style>
